import React from "react";
import { Card, Descriptions, Table, Typography } from "antd";
import { CheckCircleOutlined, ClockCircleOutlined } from "@ant-design/icons";

const { Title } = Typography;

const RefundDetail: React.FC = () => {
  // 商品表格列定义
  const productColumns = [
    { title: "商品编号", dataIndex: "productId", key: "productId" },
    { title: "商品名称", dataIndex: "productName", key: "productName" },
    { title: "商品条码", dataIndex: "barcode", key: "barcode" },
    { title: "单价", dataIndex: "price", key: "price" },
    { title: "数量（件）", dataIndex: "quantity", key: "quantity" },
    { title: "金额", dataIndex: "amount", key: "amount" },
  ];

  // 商品数据
  const productData = [
    {
      key: "1",
      productId: "1234561",
      productName: "矿泉水550ml",
      barcode: "12421432143214321",
      price: "2.00",
      quantity: 1,
      amount: "2.00",
    },
    {
      key: "2",
      productId: "1234562",
      productName: "凉茶300ml",
      barcode: "12421432143214322",
      price: "3.00",
      quantity: 2,
      amount: "6.00",
    },
    {
      key: "3",
      productId: "1234563",
      productName: "好吃的薯片",
      barcode: "12421432143214323",
      price: "7.00",
      quantity: 4,
      amount: "28.00",
    },
    {
      key: "4",
      productId: "1234564",
      productName: "特别好吃的蛋卷",
      barcode: "12421432143214324",
      price: "8.50",
      quantity: 3,
      amount: "25.50",
    },
  ];

  // 进度表格列定义
  const progressColumns = [
    { title: "时间", dataIndex: "time", key: "time" },
    { title: "当前进度", dataIndex: "progress", key: "progress" },
    {
      title: "状态",
      dataIndex: "status",
      key: "status",
      render: (status: string) => (
        <span data-oid="tyy2u-:">
          {status === "进行中" ? (
            <ClockCircleOutlined
              style={{ color: "#1890ff", marginRight: 8 }}
              data-oid="rvobsy1"
            />
          ) : (
            <CheckCircleOutlined
              style={{ color: "#52c41a", marginRight: 8 }}
              data-oid="0:1jar4"
            />
          )}
          {status}
        </span>
      ),
    },
    { title: "操作员ID", dataIndex: "operatorId", key: "operatorId" },
    { title: "耗时", dataIndex: "duration", key: "duration" },
  ];

  // 进度数据
  const progressData = [
    {
      key: "1",
      time: "2017-10-01 14:10",
      progress: "联系客户",
      status: "进行中",
      operatorId: "取货员 ID1234",
      duration: "5mins",
    },
    {
      key: "2",
      time: "2017-10-01 14:05",
      progress: "取货员出发",
      status: "成功",
      operatorId: "取货员 ID1234",
      duration: "1h",
    },
    {
      key: "3",
      time: "2017-10-01 13:05",
      progress: "取货员接单",
      status: "成功",
      operatorId: "取货员 ID1234",
      duration: "5mins",
    },
    {
      key: "4",
      time: "2017-10-01 13:00",
      progress: "申请审批通过",
      status: "成功",
      operatorId: "系统",
      duration: "1h",
    },
    {
      key: "5",
      time: "2017-10-01 12:00",
      progress: "发起退货申请",
      status: "成功",
      operatorId: "用户",
      duration: "5mins",
    },
  ];

  return (
    <div className="p-6" data-oid="felw-ml">
      <Title level={2} data-oid="v9gfmk8">
        基础详情页
      </Title>

      <Card className="mb-6" data-oid="ey8236a">
        <Title level={4} data-oid="rtk5ykl">
          退款申请
        </Title>
        <Descriptions bordered data-oid="gxri7ad">
          <Descriptions.Item label="取货单号" data-oid="9qt3xh1">
            1000000000
          </Descriptions.Item>
          <Descriptions.Item label="状态" data-oid="yimmumz">
            已取货
          </Descriptions.Item>
          <Descriptions.Item label="销售单号" data-oid="4vcp5od">
            1234123421
          </Descriptions.Item>
          <Descriptions.Item label="子订单" data-oid="d8c3v9q">
            3214321432
          </Descriptions.Item>
        </Descriptions>
      </Card>

      <Card className="mb-6" data-oid="q-hx5-a">
        <Title level={4} data-oid="m7i9qum">
          用户信息
        </Title>
        <Descriptions bordered data-oid="whgi_dy">
          <Descriptions.Item label="用户姓名" data-oid="5qv6i:b">
            付小小
          </Descriptions.Item>
          <Descriptions.Item label="联系电话" data-oid="03m_mac">
            18100000000
          </Descriptions.Item>
          <Descriptions.Item label="常用快递" data-oid="57xitou">
            菜鸟仓储
          </Descriptions.Item>
          <Descriptions.Item label="取货地址" data-oid="e:flv48">
            浙江省杭州市西湖区万塘路18号
          </Descriptions.Item>
          <Descriptions.Item label="备注" data-oid="vd3jy3s">
            无
          </Descriptions.Item>
        </Descriptions>
      </Card>

      <Card className="mb-6" data-oid="t68vyw0">
        <Title level={4} data-oid="6hoeeue">
          退货商品
        </Title>
        <Table
          columns={productColumns}
          dataSource={productData}
          pagination={false}
          summary={(pageData) => {
            const totalQuantity = pageData.reduce(
              (sum, item) => sum + item.quantity,
              0,
            );
            const totalAmount = pageData.reduce(
              (sum, item) => sum + parseFloat(item.amount),
              0,
            );
            return (
              <Table.Summary fixed data-oid="bv1dqjp">
                <Table.Summary.Row data-oid="d12-_ru">
                  <Table.Summary.Cell index={0} colSpan={4} data-oid="xf7vc6o">
                    总计
                  </Table.Summary.Cell>
                  <Table.Summary.Cell index={1} data-oid="tq9r:sj">
                    {totalQuantity}
                  </Table.Summary.Cell>
                  <Table.Summary.Cell index={2} data-oid="eavw7bo">
                    {totalAmount.toFixed(2)}
                  </Table.Summary.Cell>
                </Table.Summary.Row>
              </Table.Summary>
            );
          }}
          data-oid="e8mc608"
        />
      </Card>

      <Card data-oid="unnvdgm">
        <Title level={4} data-oid="ujeu02y">
          退货进度
        </Title>
        <Table
          columns={progressColumns}
          dataSource={progressData}
          pagination={false}
          data-oid="9aof0-e"
        />
      </Card>
    </div>
  );
};

export default RefundDetail;
